<script setup lang="ts">
import { Notification } from '@arco-design/web-vue'
import ConfigFormPanel from './ConfigFormPanel.vue'
import { useRequest, useTable } from '@/hooks'
import { ConfigApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'

defineOptions({
  name: 'Config',
})

const queryForm = reactive<ConfigApi.ConfigQuery>({
  category: undefined,
})

// 获取配置分类列表
const {
  loading: treeLoading,
  response: treeData,
} = useRequest(() => ConfigApi.listCategory().then(res =>
  res.map((item) => {
    return {
      id: item.category,
      title: `${item.category}(${item.configCount})`,
    }
  }),
))

const {
  tableData,
  loading,
  search,
} = useTable(() => ConfigApi.getList(queryForm.category || 'default'), { immediate: false })

const columns: TableInstanceColumns[] = [
  { title: '配置名称', dataIndex: 'name', slotName: 'name' },
  { title: '配置编码', dataIndex: 'code', slotName: 'code', ellipsis: true, tooltip: true },
  { title: '配置值', dataIndex: 'value', slotName: 'value', ellipsis: true, tooltip: true },
  { title: '动态配置', dataIndex: 'dynamic', slotName: 'dynamic' },
  { title: '描述', dataIndex: 'description', slotName: 'description', ellipsis: true, tooltip: true },
]

// 根据选中配置类别查询
const selectedCategory = ref<ConfigApi.ConfigCategory>()
const onTreeNodeSelect = (key: string, node: ConfigApi.ConfigCategory) => {
  selectedCategory.value = node
  queryForm.category = key
  search()
}

const ConfigFormPanelRef = ref<InstanceType<typeof ConfigFormPanel>>()
// 新增
const onCreate = () => {
  ConfigFormPanelRef.value?.create(queryForm.category)
}
// 详情
const onDetail = (row) => {
  ConfigFormPanelRef.value?.open(row.id)
}
// 重新加载配置
const onReload = () => {
  ConfigApi.reloadConfig().then((_) => {
    Notification.success('加载成功')
  })
}
</script>

<template>
  <ProPage title="参数配置" description="统一管理系统各项参数配置，此页面面向开发运维人员使用，业务人员请到管理中心进行配置。" flex-table>
    <TreeTableLayout>
      <template #left>
        <ListTree
          :loading="treeLoading"
          :data="treeData"
          @select="onTreeNodeSelect"
        />
      </template>
      <template #right>
        <ProTable
          :data="tableData"
          :columns="columns"
          :loading="loading"
          :pagination="false"
          :show-index="true"
          @refresh="search"
          @row-click="onDetail"
        >
          <template #toolbar-right>
            <a-button v-permission="['system:config:manage']" type="outline" @click="onReload">
              <template #icon>
                <icon-refresh />
              </template>
              <span>加载配置</span>
            </a-button>
            <a-button v-permission="['system:config:manage']" type="primary" @click="onCreate">
              <template #icon>
                <icon-plus />
              </template>
              <span>创建配置</span>
            </a-button>
          </template>
          <template #dynamic="{ record }">
            <CellDict :value="record.dynamic" code="BooleanEnum" />
          </template>
        </ProTable>
      </template>
    </TreeTableLayout>
    <ConfigFormPanel ref="ConfigFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped>
</style>
